RESTful API 在 Amazon Linux 2 上傳圖片實作－Day 07

RESTful API 規格書

因為 RESTful API 需要前後端的合作，前端呼叫，後端設計開發，因此最好在正式運作之前先撰寫 RESTful API 規格書，如下圖所示。必須要確認的資訊有：

• 功能說明：用來說明這個服務所提供的目的。
• 服務路徑 (URI)： /imgUpload/
• 請求方法：POST
• 請求格式：multipart/form-data，需要說明，不然前端不知該如何傳遞資料的編碼方式。
• 請求輸入的參數說明：fileUpload，這必須要前後端一致，所以必須好好描述，名稱是必要的，資料型態也要確認，有些參數是選擇性的，也可以在說明中詳述
• 回應格式：JSON，這是前端需要清楚，這樣才能知道該如何處理資料。
• 回應內容說明：fishQtn，如同請求輸入的參數說明一樣，必須要告訴後端開發者，前端的需求。
• 請求回應範例：最好是提供，這樣可以讓前後端開發者都可以測試功能是否正確。

圖 1、上傳圖片的 RESTful API 規格範例

設定前端請求

有了這個規格書，就可以開始進行後端的開發，很明顯的，我們這個專案只需要一個 RESTful API 功能，就是上傳一張圖片，由後端來判斷這張圖片是屬於哪一種魚類，但因為魚類辨識功能尚未實作，所以我們在此只完成上傳圖片功能，而回應部分就固定回應一個答案就好，這樣方便前端進行開發。

打開 Advanced REST client (ARC)並根據規格書來進行設定，如下圖所示：

• 請求方法：POST
• 服務路徑 (URI)： http://[EC2_IPv4]:8000/imgUpload/
• 請求格式：選擇 BODY 頁籤，格式選擇 Multipart form data。
• 請求輸入的參數說明：點選下方的 ADD FILE PART 按鈕，輸入
  • Name: fileUpload
  • Value: 點擊 CHOOSE FILE 按鈕，可以讓使用者從電腦中選擇一個圖片

圖 2、Advanced REST client 設定前端請求

進行後端 Django 撰寫

打開終端機或是 Putty 連線到 AWS EC2，進行 Django 後端程式的撰寫，因為對應到的是 POST 的請求，所以只需要修改 post 方法的修改即可。
新增一個文件夾 upload 用來存放圖片，要特別注意相對應的文件夾位置，upload 的所在位置與 fishsite 應用是同等的，如下圖所示。

cd ~/fishRecognition/fishsite
mkdir upload

圖 3、圖片文件夾的所在位置

修改 fishsite/view.py 的 post 方法，主要有三部分，第一部分是接收前端所傳來的圖片，第二部分是查詢資料庫，而第三部分則是加上 fishQtn 魚隻數量的欄位，以符合規格書的要求

    def post(self, request, *args, **krgs):
        print('FishView->post')
        uploadFile = request.FILES.get('fileUpload')
        # write the uploaded file into the server
        filename = r'upload/{}'.format(uploadFile.name)
        with open(filename, 'wb') as f:
            for chunk in uploadFile.chunks():
                f.write(chunk)
        print('FishView->upload')
        sql = "SELECT fishName, distribution, LatinName FROM fishInfoTbl WHERE mark=1"
        with connection.cursor() as cursor:
            cursor.execute(sql)
            data = dictfetchall(cursor)
        print('FishView->' + sql)
        data[0]['fishQtn']=1
        return JsonResponse(data,safe=False)

圖 4、後端 RESTful API 部分程式碼

完成了這一部分程式碼後就可以啟動 Django Web 伺服器功能，然後透過 ARC 來呼叫後端服務，成功的話可以看到以下的畫面，正常回傳回應。

python3 manage.py runserver 0.0.0.0:8000

圖 5、ARC 來呼叫後端服務

也在到後端去確認一下檔案是否有寫入，除了確認檔案名稱外，也要確認檔案大小是否正確，如下圖所示。

圖 6、確認後端是否有正確接收檔案

參考資料

• 用 Django REST Framework 撰寫 RESTful API 並生成 Swagger 文檔（上） — 用Django REST Framework 撰寫 RESTful API, https://zoejoyuliao.medium.com/用-django-rest-framework-撰寫-restful-api-並生成-swagger-文檔-7cbef7c8e8d6
• Django rest framework: How to make a simple file upload API using viewsets, https://joel-hanson.medium.com/drf-how-to-make-a-simple-file-upload-api-using-viewsets-1b1e65ed65ca
• Generic views, https://www.django-rest-framework.org/api-guide/generic-views/
• Django REST framework 实现文件上传的两种方式, https://www.starky.ltd/2019/12/21/file-upload-by-django-rest-framework-two-ways/